<template>
  <div class="input-wrap">
      <input type="text" v-model="input_value" :placeholder="placeholder">
  </div>
</template>

<script>
export default {
    props: {
        value: {
           default: ''
        },
        placeholder: String
    },

    data() {
        return {
            input_value: ''
        }
    },

    mounted() {
        this.input_value = this.value
    },

    watch: {
        input_value(value) {
            this.$emit('input', value)
        },
        value(newValue) {
            console.log('valueChange', newValue)
            this.input_value = newValue
        },
    },
};

</script>
<style lang='stylus' scoped>
.input-wrap
    display block
    input
        display block
        width 100%
        height 40px
        line-height 1.5
        padding 4px 7px
        font-size 12px
        border 1px solid #dcdee2
        border-radius 4px
        color #515a6e
        background-color #fff
        background-image none
        position relative
        outline none
        cursor text
        font-weight 300
        box-sizing border-box
        transition border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out
        &:focus
            border-color #f26444
</style>